<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
 <!-- viewport is the actual area we are drawing too -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	
 <!-- capable of being a web app -->
 <meta name="apple-mobile-web-app-capable" content="yes">
 
 <!-- set the status bar for ios web app -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	
 <title>SwipeView</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../../src/swipeview.js"></script>
</head>

<body>
 <!-- this is the wraper that will hold our carasell -->
	<div id="wrapper">
   
   
   <!--<iframe src="helloworld.html"></iframe>-->
 </div>
 
 <!-- this is our nav area -->
	<ul id="nav">
		<li id="prev" onclick="gallery.prev()">-</li>
		<li class="selected" onclick="gallery.goToPage(0)"></li>
		<li onclick="gallery.goToPage(1)"></li>
		<li onclick="gallery.goToPage(2)"></li>
		<li onclick="gallery.goToPage(3)"></li>
		<li onclick="gallery.goToPage(4)"></li>
		<li onclick="gallery.goToPage(5)"></li>
		<li id="next" onclick="gallery.next()">+</li>
	</ul>
	
<script type="text/javascript">
  
// get ride of  default actions for touch like scrolling the view
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

var	gallery,
	el,
	i,
	page,
 
 // get all the nav list items
	dots = document.querySelectorAll('#nav li'),
 
 
 // array of slides we want to use
	slides = [
		{
			img: 'images/pic01.jpg',
			width: 300,
			height: 213,
			desc: 'Piazza del Duomo, Florence, Italy',
   href: 'helloworld.html'
		},
		{
			img: 'images/pic02.jpg',
			width: 300,
			height: 164,
			desc: 'Tuscan Landscape',
   href: 'page1.html'
		},
		{
			img: 'images/pic03.jpg',
			width: 300,
			height: 213,
			desc: 'Colosseo, Rome, Italy',
   href: 'page2.html'
		},
		{
			img: 'images/pic04.jpg',
			width: 147,
			height: 220,
			desc: 'Somewhere near Chinatown, San Francisco',
   href: 'helloworld.html'
		},
		{
			img: 'images/pic05.jpg',
			width: 300,
			height: 213,
			desc: 'Medieval guard tower, Asciano, Siena, Italy',
   href: 'page1.html'
		},
		{
			img: 'images/pic06.jpg',
			width: 165,
			height: 220,
			desc: 'Leaning tower, Pisa, Italy',
   href: 'page2.html'
		}
	];

// initialize swipe view the our wrapper div,
// and number of pages we would like to travers through
gallery = new SwipeView('#wrapper', { numberOfPages: slides.length });

////////// initialize the first three pages
for (i=0; i<3; i++) {
  
 // the order will be slides.length-1, 0, 1
	page = i==0 ? slides.length-1 : i-1;
 
 // create image element
//	el = document.createElement('img');
 /*
  #wrapper > div > .swipeview-loading img,
  #swipeview-slider img.loading {
	   -webkit-transition-duration:0;
	   opacity:0;
  }
  */
//	el.className = 'loading'; // opacity is zero
 
 // set source
//	el.src = slides[page].img;
 
 //// set width and height
//	el.width = slides[page].width;
//	el.height = slides[page].height;
 
 // once image is loaded clear className
//	el.onload = function () { this.className = ''; }
 
 // append this to masterpage
//	gallery.masterPages[i].appendChild(el);

 // also append span to page
//	el = document.createElement('span');
//	el.innerHTML = slides[page].desc;
//	gallery.masterPages[i].appendChild(el)

el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
gallery.masterPages[i].appendChild(el);
el.setAttribute('src', slides[page].href);
 
}// end for


////// set the onFlip event 
gallery.onFlip(function () {
	var el,
		upcoming,
		i;

 //// reset all the pages
	for (i=0; i<3; i++) {
   
  // upcomming page we will load
		upcoming = gallery.masterPages[i].dataset.upcomingPageIndex;

  // if upcomming page has not load yet
		if (upcoming != gallery.masterPages[i].dataset.pageIndex) {
			el = gallery.masterPages[i].querySelector('img');
   
   // seting this to 'loading' will set opacity of image to 0 
   // untill onload of image is fired which will undo the class setting
   // see line 112
			el.className = 'loading';
			el.src = slides[upcoming].img;
			el.width = slides[upcoming].width;
			el.height = slides[upcoming].height;
			
			el = gallery.masterPages[i].querySelector('span');
			el.innerHTML = slides[upcoming].desc;
		}
	}
	
 // set the next dot
	document.querySelector('#nav .selected').className = '';
	dots[gallery.pageIndex+1].className = 'selected';
});

// not quite sure what this does,
// it think it deselects the current masterpage
gallery.onMoveOut(function () {
	gallery.masterPages[gallery.currentMasterPage].className = gallery.masterPages[gallery.currentMasterPage].className.replace(/(^|\s)swipeview-active(\s|$)/, '');
});

// looks like it selects the current master page
gallery.onMoveIn(function () {
	var className = gallery.masterPages[gallery.currentMasterPage].className;
	/(^|\s)swipeview-active(\s|$)/.test(className) || (gallery.masterPages[gallery.currentMasterPage].className = !className ? 'swipeview-active' : className + ' swipeview-active');
});

</script>
</body>
</html>